<template>
    <div>
        <div class="root">{{items}}
        <SortableList :lockToContainerEdges="true" @input="ddds"  :distance="disnum" lockOffset="0%" lockAxis="xy" axis="xy" v-model="items">
            <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
        </SortableList>
        </div>  
    </div>
</template>
<script>
    import Vue from "vue";
    import {ContainerMixin, ElementMixin} from 'vue-slicksort';
    const SortableList = {
      mixins: [ContainerMixin],
      template: `
        <ul class="list">
          <slot />
        </ul>
      `
    };

    const SortableItem = {
      mixins: [ElementMixin],
      props: ['item'],
      template: `
        <li class="list-item"> <el-checkbox v-model="item.ischeck" >{{item.name}}</el-checkbox></li>
      `,
      data(){
        return{
          checked:false
        }
      }
    };

export default {
  components: {SortableItem,
    SortableList},
  data() {
    return {
      disnum:10,
       items: [
        {name:"item1",ischeck:false},
        {name:"item2",ischeck:false},
        {name:"item3",ischeck:false},
        {name:"item4",ischeck:false},
        {name:"item5",ischeck:false},
        {name:"item6",ischeck:false},
        {name:"item7",ischeck:false},
      ],
    }
    }
}
</script>
<style lang="scss">
.list{
  width: 500px;
  // display: flex;
  //     flex-wrap: wrap;
    border: 1px solid #ddd;
    line-height: 40px;
    text-align: center;
    list-style: none;
}
  .list-item{
     width:100px;
    height: 40px;
    border: 1px solid #ddd;
    line-height: 40px;
    text-align: center;
    list-style: none;
    display: inline-block;
  }
</style>